<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <%@include file="./headMeta.jsp" %>
  </head>
  <body class="skin-blue">
    <%@include file="./header.jsp" %>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
        <%@include file="./sidebar.jsp" %>

      <!-- Right side column. Contains the navbar and content of the page -->
      <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                报表
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-5">
                  <!-- Date dd/mm/yyyy -->
                  <div class="form-group">
                      <label>起始时间：</label>
                      <div class="input-group">
                          <div class="input-group-addon">
                              <i class="fa fa-calendar"></i>
                          </div>
                          <input type="text" id="startDate" class="form-control" data-inputmask="'alias': 'yyyy/mm'" data-mask value="2015/01"/>
                      </div><!-- /.input group -->
                  </div><!-- /.form group -->
                </div>
                <div class="col-md-5">
                  <!-- Date mm/dd/yyyy -->
                  <div class="form-group">
                      <label>结束时间：</label>
                      <div class="input-group">
                          <div class="input-group-addon">
                              <i class="fa fa-calendar"></i>
                          </div>
                          <input type="text" id="endDate" class="form-control" data-inputmask="'alias': 'yyyy/mm'" data-mask value="2015/07"/>
                      </div><!-- /.input group -->
                  </div><!-- /.form group -->
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                      <label>&nbsp;</label>
                      <button class="btn btn-primary btn-block" id="confirm_btn">确定</button>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">月销售金额</h3><div class="pull-right box-tools"><h4>单位：元</h4></div>
                        </div><!-- /.box-header -->
                        <div class="box-body chart-responsive">
                            <div class="chart" id="line-chart" style="height: 300px;"></div>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div>
            </div><!-- /.row -->
        </section><!-- /.content -->   
      </aside>
    </div><!-- ./wrapper -->
  </body>
  <%@include file="./javascript.jsp" %>
  <!-- InputMask -->
  <script src="./resource/js/plugins/input-mask/jquery.inputmask.js" type="text/javascript"></script>
  <script src="./resource/js/plugins/input-mask/jquery.inputmask.date.extensions.js" type="text/javascript"></script>
  <script src="./resource/js/plugins/input-mask/jquery.inputmask.extensions.js" type="text/javascript"></script>
  <script src="./resource/js/orderFormat.js" type="text/javascript"></script>

  <script type="text/javascript">
    // 渲染所有订单数据
    var RENDER = {
      data: ${json}
    };

    (function() {
      //Datemask dd/mm/yyyy
      $("#datemask").inputmask("yyyy/mm", {"placeholder": "yyyy/mm"});
      //Datemask2 mm/dd/yyyy
      $("#datemask2").inputmask("yyyy/mm", {"placeholder": "yyyy/mm"});
      $("[data-mask]").inputmask();
    })();

    // var data = [
    //   {y: '2012-1', amount: 12.4},
    //   {y: '2012-4', amount: 30},
    //   {y: '2012-7', amount: 1},
    //   {y: '2012-10', amount: 60},
    //   {y: '2013-1', amount: 120},
    //   {y: '2013-4', amount: 30},
    //   {y: '2013-7', amount: 1},
    //   {y: '2013-10', amount: 60},
    //   {y: '2014-1', amount: 12},
    //   {y: '2014-4', amount: 30},
    //   {y: '2014-7', amount: 1},
    //   {y: '2014-10', amount: 60},
    // ];


    // LINE CHART
    var chartLine = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: [],
        xkey: 'y',
        xLabels: 'month',
        ykeys: ['amount'],
        labels: ['金额'],
        lineColors: ['#3c8dbc'],
        hideHover: 'auto'
    });

    var saleAmount = saleAmountInit();
    chartLine.setData(saleAmount.getStorage());

    $('#confirm_btn').on('click', function() {
      // 按照日期初始化数据
      saleAmount.reset();
      // 重绘图表
      chartLine.setData(saleAmount.getStorage());
    });




  </script>
</html>
